/*
 * @Description: 频道列表
 * @Author: Zzt
 * @Date: 2023-02-20 11:27:53
 * @LastEditTime: 2023-02-28 17:16:30
 */

import { IArchiveType } from '@/interfaces/archiveType';
import { Button, Dropdown, Menu, MenuProps, message } from 'antd';
import classNames from 'classnames/bind';
import { useEffect, useMemo, useState } from 'react';
import { useAnnouncementMgtContext } from '../contexts/AnnouncementMgtContext';
import styles from '../styles/channel.module.scss';
import AddChannel from './dialogs/AddChannel';
const cx = classNames.bind(styles);
interface IChannel {
  name: string;
  id: number;
}

const ChannelList = () => {
  const { noticeTypeId, setSelectChannelId, getChannelList, channelList, delChannel } =
    useAnnouncementMgtContext();

  const [listVisible, setListVisible] = useState(false);

  // 选中的频道类型id
  useEffect(() => {
    // TODO 调取接口获取频道列表
    getChannelList();
  }, []);
  /**
   * @description: 切换频道类型
   * @param {any} param1
   */
  const onChannelSelect = ({ key }: any) => {
    setSelectChannelId(parseInt(key, 10));
  };
  const items = channelList.map((item: IChannel) => ({
    label: item.name,
    key: item.id
  }));
  items.unshift({ label: '全部', key: 0 });

  const addList = () => {
    setListVisible(true);
  };
  const dropItems = (
    <Menu
      items={[
        {
          key: '1',
          label: (
            <Button type="link" onClick={() => delectItem()}>
              删除当前选择频道
            </Button>
          )
        }
      ]}
    />
  );
  const delectItem = () => {
    if (noticeTypeId === 0) {
      message.warning('全部无法删除');
    } else {
      delChannel(noticeTypeId);
    }
  };
  return (
    <>
      <div className={cx('channe-head')}>
        <div className={cx('channe-title', 'back')}>频道列表</div>
        <div className={cx('channe-title')} onClick={addList}>
          +添加频道
        </div>
      </div>
      <div>
        <Dropdown overlay={dropItems} trigger={['contextMenu']}>
          <Menu
            items={items}
            selectedKeys={[`${noticeTypeId}`]}
            onSelect={onChannelSelect}
            style={{ width: 200 }}
          />
        </Dropdown>
      </div>
      {useMemo(
        () => (
          <AddChannel onClose={() => setListVisible(false)} visible={listVisible} />
        ),
        [listVisible]
      )}
    </>
  );
};
export default ChannelList;
